<template>
  <div class="m-4 mr-0 bg-white scroll-x-content">
    <BasicTree
      class="width-800"
      @expand="test"
      @expandAll="false"
      title="分类列表"
      helpMessage="从左往右为：sku量，订单数"
      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
      :clickRowToExpand="false"
      :treeData="treeData"
      :fieldNames="{ key: 'catId', title: 'new_name' }"
      @select="handleSelect"
    />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import { BasicTree, TreeItem } from '/@/components/Tree'

  const emit = defineEmits(['select', 'expand'])
  const props = defineProps({
    treeData: Array,
  })

  function test(expandedKeys, { expanded, node }) {
    if (expanded) {
      emit('expand', node.catId)
    }
  }

  function test2(node) {
    // node.children = [{'name':'sss'},{'name':'sss'},{'name':'sss'},{'name':'sss'}]
    console.log(node)
  }

  function handleSelect(keys) {
    emit('select', keys[0])
  }
</script>
<style>
  .width-800 {
    width: 600px;
  }
  .scroll-x-content {
    overflow-x: scroll;
    overflow-y: hidden;
  }
</style>
